$(function () {
    // 一、进入页面获取文章类别信息---template模板渲染到html页面上
    // 获取文章类别模块封装
    function category_list() {
        $.ajax({
            type: "get",
            url: bignews.category_list,
            success: function (res) {
                // console.log(res);
                if (res.code == 200) {
                    const article = template('article_categoryTemplete', res);
                    $('.category_table tbody').html(article);
                }

            }
        });
    }
    // 进入页面自动调用获取文章类别模块函数
    category_list();

    // 封装文章类别新增和修改函数
    function category_opt(url, data) {
        $.ajax({
            type: 'post',
            url,
            data,
            success: function (res) {
                // 新增成功隐藏模态框
                $('#myModal').modal('hide')
                // 清空表单内容
                // $('#cateName').val('');
                // $('#cateSlug').val('');
                $('#myForm')[0].reset();
                // 再次调用获取文章类别模块
                category_list();
            }
        });
    }

    // 二、监听表单确认按钮事件 
    // 新增分类或者是编辑分类按钮
    $('#btn-opt').on('click', function () {
        // console.log($(this).text());
        const name = $('#cateName').val();
        const slug = $('#cateSlug').val();
        // 新增分类情况
        if ($(this).text() == '新增') {
            category_opt(bignews.category_add, {
                name,
                slug
            })
        } else {
            // 编辑分类情况
            category_opt(bignews.category_edit, {
                name,
                slug,
                id: $('#cateId').val()
            })
        }
    })

    // 三、监听 删除分类事件---删除按钮动态生成，需要事件委托来处理
    $('.table tbody').on('click', '#btn-del', function () {
        console.log($(this).data('id'));

        $.ajax({
            type: 'post',
            url: bignews.category_delete,
            data: { id: $(this).data('id') },
            success: function (res) {
                if (res.code == 204) {
                    // 删除成功后重新加载页面
                    category_list();
                }
            }
        });
    });

    // 四、修改分类
    $('.table tbody').on('click', '#btn-edit', function () {
        // console.log('编辑');
        // 点击编辑弹出模态框---与新增分类共用一个模态框，需修改文字
        $('#myModalLabel').text('编辑分类');
        $('#btn-opt').text('编辑');
        $('#cateName').val($(this).data('name'));
        $('#cateSlug').val($(this).data('slug'));
        // 储存id数据，编辑分类中使用
        $('#cateId').val($(this).data('id'));
        $('#myModal').modal('show')

    })

    // 五/点击编辑时改变模态框文字
    // 需每次点击新增时是原始状态
    // 每当模态框消失的时候，就恢复成原始状态
    // hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
    $('#myModal').on('hidden.bs.modal', function () {
        // 模态框隐藏之后恢复原始状态
        $('#myModalLabel').text('新增分类');
        $('#btn-opt').text('新增');
        $('#myForm')[0].reset();
    })

















})